<template>
	<div class="goods-item">
		<div class="goods-bg">
			<router-link :to="'/goods/detail?gdsId='+goods.gdsId" class="img-wrap"><!--未来要改成使用router-linker-->
					<van-image :src="goods.gdsImg" lazy-load/>
					<div class="shadow" v-if="goods.noStork">区域无货</div>
					<div class="more-oper" v-if="!goods.agentPrice" @click.stop="showToast('查看提货价')">查看提货价</div>
					<div class="more-oper" v-else-if="goods.noStork" @click.stop="showToast('到货通知')">到货通知</div>
			</router-link>
			<div class="goods-info">
				<router-link :to="{path:'/goods/detail',query:{gdsId:goods.gdsId}}"><!--未来要改成使用router-linker-->
					<div class="goods-name van-multi-ellipsis--l2">{{goods.gdsName}} {{goods.titleExt||''}}</div>
					<div class="bottom-wrap">
						<div class="price" v-if="goods.agentPrice"><b><small>￥</small>{{fen2Yuan(goods.agentPrice as number)}}</b></div>
						<div class="price" v-else><b><small>￥</small>{{fen2Yuan(goods.guidePrice as number)}}</b><em>指导价</em></div>
						<div class="coupon" v-if="goods.hasCoupon&&goods.agentPrice">礼券</div>
						<div class="sale-amount" v-if="goods.saleAmount&&goods.saleAmount>0">已售{{thousandDivisor(goods.saleAmount)}}</div>
					</div>
				</router-link>
				<router-link :to="'/shop/home?shopId='+goods.shopId" class="about-shop" v-if="goods.shopId">
					<i class="iconfont txt-unicom" v-if="isHs(goods.shopType as string)">&#xe6ef;</i>
					<i class="iconfont txt-unicom" v-else-if="isLt(goods.shopType as string)">&#xe720;</i>
					<i class="iconfont txt-success" v-else>&#xe68c;</i>
					<span :title="goods.shopName">{{goods.shopName}}</span>
				</router-link>
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.goods-item{
	overflow:hidden; font-size:14px;
	break-inside: avoid;
	.goods-bg{
		width:100%;background-color:var(--white-color);border-radius: 8px; overflow:hidden;
		position:relative;
		a{color:var(--font-first-color);display:block;margin:0;}
		.img-wrap{
			position:relative;width:100%;aspect-ratio:1;overflow:hidden;
			.van-image{width:100%;height:100%; aspect-ratio: 1}
			img{width:100%;aspect-ratio:1}
			.shadow{
				position:absolute; bottom:0;left:0;width:100%;color:var(--white-color);
				background-color: rgba(0,0,0,.4);height:24px; line-height:24px;text-align: center;
			}
			.more-oper{
				position:absolute;right:0;top:0; background-color: rgba(0,0,0,.4); line-height: 24px; height:24px;
				color:var(--white-color); border-bottom-left-radius: 4px; border-top-right-radius: 8px; padding:0 8px 0 6px;
				display:block;
			}
		}
		.goods-name{ margin:10px; line-height:18px;height:36px;}
		.bottom-wrap{
			margin:10px;display: flex; justify-content:flex-start; align-items: center;
			.price{
				color:var(--van-primary-color);
				b{font-size:16px;}
				small{font-size:12px;}
				em{font-size:12px;color:var(--van-primary-color);margin-left:2px}
			}
			.coupon{
				margin-left:3px; padding:0 3px; border-radius: 2px;
				border:1px solid var(--van-unicom-color);
				color:var(--van-unicom-color);
				height:16px; line-height: 14px;font-size:12px;
			}
			.sale-amount{color:var(--font-disable-color); margin-left: auto; font-size:12px;}
		}
		.about-shop{
			display: flex; align-items: center; color:var(--font-third-color); line-height: 16px;
			padding:0 10px 10px; font-size:12px;
			.iconfont{margin-right:3px; flex-shrink: 0;font-size:14px;}
			span{display:block;flex:1;overflow:hidden; white-space: nowrap; text-overflow: ellipsis;}
		}
	}
}
.flat>.goods-item{
	.goods-bg{
		display:flex;align-items: stretch;
		.img-wrap{width:34%;flex-shrink: 0; border-radius: 8px;}
		.goods-name{margin:8px 10px;}
		.goods-info{
			width:68%;display:flex; flex-direction: column; align-items: flex-start;
			a:not(.about-shop){
				flex:1;width:100%;display:flex;flex-direction:column;justify-content:flex-start;
				.bottom-wrap{margin-top:auto;}
			}
			.about-shop{
				overflow: hidden; white-space: nowrap; text-overflow: ellipsis;width:100%;
			}
		}
	}
}
</style>
<script lang="ts" setup generic="T">
import {SearchGoodsItem} from "@/types"
import {fen2Yuan,thousandDivisor} from "@/utils/validate"
import { showToast } from 'vant';
const props = defineProps<{
	goods:SearchGoodsItem,
}>()
const domain = import.meta.env.VITE_DOMAIN

//methods
const isHs = (text:string)=>{
	return text.indexOf('华盛')>=0
}
const isLt = (text:string)=>{
	return text.indexOf('联通自营')>=0
}

//methods

</script>